<template>
  <div class="space-time-container">
    <a-layout class="space-time-layout">
      <a-layout>
        <a-layout-sider width="15%" style="background: #fff" >
          <a-tabs default-active-key="1" @change="tabChange">
            <a-tab-pane key="1">
              <span slot="tab">
                <a-icon type="compass" />
                图层
              </span>
              <ListLayer />
            </a-tab-pane>
            <a-tab-pane key="2">
              <span slot="tab">
                <a-icon type="unordered-list" />
                列表
              </span>
              <List-item />
            </a-tab-pane>
          </a-tabs>
        </a-layout-sider>

        <a-layout style="padding: 0">
          <a-layout-content :style="{ background: '#fff', padding: 0, margin: 0, minHeight: '280px' }">
            <PublicMap />
          </a-layout-content>
        </a-layout>

        <a-layout-sider width="200" style="background: #fff">
          <a-menu
            mode="inline"
            :default-selected-keys="['1']"
            :default-open-keys="['sub1']"
            :style="{ height: '100%', borderRight: 0 }"
          >
            <a-sub-menu key="sub1">
              <span slot="title"><a-icon type="user" />检索</span>
              <a-menu-item key="1">
                属性检索
              </a-menu-item>
              <a-menu-item key="2">
                空间检索
              </a-menu-item>
            </a-sub-menu>
            <a-sub-menu key="sub2">
              <span slot="title"><a-icon type="laptop" />空间分析</span>
              <a-menu-item key="3">
                缓冲区分析
              </a-menu-item>
              <a-menu-item key="4">
                叠加分析
              </a-menu-item>
              <a-menu-item key="5">
                趋势分析
              </a-menu-item>
              <a-menu-item key="6">
                多维分析
              </a-menu-item>
            </a-sub-menu>
            <a-sub-menu key="sub3">
              <span slot="title"><a-icon type="notification" />专题图</span>
              <a-menu-item key="7">
                聚类图
              </a-menu-item>
              <a-menu-item key="8">
                热力图
              </a-menu-item>
              <a-menu-item key="9">
                格网图
              </a-menu-item>
            </a-sub-menu>
            <a-sub-menu key="sub4">
              <span slot="title"><a-icon type="notification" />数据处理</span>
              <a-menu-item key="10">
                编辑
              </a-menu-item>
              <a-menu-item key="11">
                抽稀
              </a-menu-item>
              <a-menu-item key="12">
                拓扑检查
              </a-menu-item>
              <a-menu-item key="13">
                导入
              </a-menu-item>
              <a-menu-item key="14">
                导出
              </a-menu-item>
            </a-sub-menu>
          </a-menu>
        </a-layout-sider>
      </a-layout>
    </a-layout>
  </div>
</template>

<script lang='ts' src='./index.ts'></script>
<style lang='scss'>
@import './_index.scss';
</style>